<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>无标题文档</title>
<link rel="stylesheet" href="common/css/common.css">
<script type="text/javascript" src="common/js/jquery-1.10.2.js"></script>
</head>
<style>
.ordbody{padding-top:16vw;}
.ordmenu{width:100%;height:9vw;background-color:white;position:fixed;top:16vw;border-bottom:1px #d9d9d9 solid;}
.ordmenu_one{width:calc(25% - 1px);line-height:9vw;font-size:4vw;text-align:center;border-right:1px #d9d9d9 solid;color:#8d8d8d;}
.ordmenu_one:last-child{width:25%;border:none;}
.ordmenu>.active{color:#272727;}
.ordlist{margin-top:calc(9vw + 1px);width:100%;}
.ordlist>a{width:100%;background-color:white;margin-top:2vw;display:block;}
.ordlist_header{width:94vw;padding:0 3vw;background-color:white;border-bottom:1px #d9d9d9 solid;}
.ordlist_header_time{
	width:42vw;
	height:8vw;
	font-size:3vw;
	line-height:8vw;
	color:black;	
}
.ordlist_header_state{
	width:40vw;
	height:8vw;
	line-height:8vw;
	font-size:3vw;
	color:#ff452c;
	text-align:right;	
}
.ordlist_body{
	width:94vw;
	padding:3vw;
	background-color:white;	
}
.ordlist_body_img{
	width:18vw;
	height:18vw;
	background-color:#C9F;
	overflow:hidden;	
}
.ordlist_body_font{
	width:74vw;
	height:10vw;
	margin-left:2vw;	
}
.olb_font_font{
	width:60vw;
	height:10vw;
	line-height:5vw;
	font-size:3.6vw;
	color:black
}
.olb_font_money{
	width:12vw;
	height:5vw;
	line-height:5vw;
	text-align:right;
	font-size:3.6vw;
	font-weight:600;
	color:black	
}
.olb_font_num{
	width:12vw;
	height:5vw;
	line-height:5vw;
	text-align:right;
	font-size:3.6vw;	
	color:#999999;
}
.ordlist_body_money{
	width:74vw;
	margin-left:2vw;	
}
.olb_money_money{
	height:5vw;
	font-size:3vw;
	margin-top:3vw;
	color:black	
}
.olb_money_money label{
	font-size:4vw;	
}
.olb_money_block{
	width:18vw;
	height:6vw;
	line-height:6vw;
	border-radius:1vw;
	background-color:#ff452c;
	margin-top:2vw;
	font-size:2.8vw;
	color:white;
	text-align:center;	
}
.ordlist_footer{
	width:94vw;
	height:8vw;
	line-height:8vw;
	margin:auto;
	background-color:white;
	border-top:1px #d9d9d9 solid;	
	font-size:3vw;
	color:black
}
</style>
<script>
	$(function (){
		imgs();	
		$(".ordmenu_one").click(function (){
			$(this).addClass("active");
			$(this).siblings(".ordmenu_one").removeClass("active");	
			var val = $(this).html();
			if(val == "全部"){
				$(".all").css("display","block");
				$(".all").siblings(".ordlist").css("display","none");
				imgs();
			}else if(val == "付款"){
				$(".fukuan").css("display","block");
				$(".fukuan").siblings(".ordlist").css("display","none");
				imgs();
			}else if(val == "结算"){
				$(".jiesuan").css("display","block");
				$(".jiesuan").siblings(".ordlist").css("display","none");
				imgs();
			}else if(val == "失效"){
				$(".shixiao").css("display","block");
				$(".shixiao").siblings(".ordlist").css("display","none");
				imgs();
			}
			
		})
	})
</script>
<body>
	<div class="buju">
          	<div class="header">
                    	<div class="header_one fl"><a href=""><img src="common/img/back001.png"/></a></div>
                              <div class="header_two fl">我的订单</div>
                    </div>
                    <div class="ordbody">
                    	<div class="ordmenu">
                              	<div class="ordmenu_one fl active">全部</div>
                                        <div class="ordmenu_one fl">付款</div>
                                        <div class="ordmenu_one fl">结算</div>
                                        <div class="ordmenu_one fl">失效</div>
                              </div>
                              <div class="ordlist all">
                              	<a href="ordetail.html">
                                        	<div class="ordlist_header">
                                                  	<div class="ordlist_header_time fl">下单：2019-11-21 11:11</div>
                                                            <div class="ordlist_header_state fr">已结算</div>
                                                  	<div class="clear"></div>
                                                  </div>
                                                  <div class="ordlist_body">
                                                  	<div class="ordlist_body_img fl">
                                                            	<img src="common/img/img001.jpg"/>
                                                            </div>
                                                            <div class="ordlist_body_font fl">
                                                            	<ul>
                                                                      	<li class="olb_font_font fl over2">仓鼠笼子送礼包47基础笼亚克力金丝熊小别墅小仓鼠大双层齐全窝包邮</li>
								<li class="olb_font_money fr">￥9.9</li>
                                                                                <li class="olb_font_num fr">x1</li>
                                                                      </ul>	
                                                                      <div class="clear"></div>
                                                            </div>	
                                                            <div class="ordlist_body_money fl">
                                                            	<div class="olb_money_money fl">
                                                                      	实付：<label>￥9.9</label>
                                                                      </div>
                                                                      <div class="olb_money_block fr">赚佣0.03元</div>
                                                            </div>
                                                            <div class="clear"></div>
                                                  </div>
                                                  <div class="ordlist_footer">订单单号：2019-11-21 11:11</div>	
                                        </a>
                                        <a href="ordetail.html">
                                        	<div class="ordlist_header">
                                                  	<div class="ordlist_header_time fl">下单：2019-11-21 11:11</div>
                                                            <div class="ordlist_header_state fr" style="color:#999">已失效</div>
                                                  	<div class="clear"></div>
                                                  </div>
                                                  <div class="ordlist_body">
                                                  	<div class="ordlist_body_img fl">
                                                            	<img src="common/img/img001.jpg"/>
                                                            </div>
                                                            <div class="ordlist_body_font fl">
                                                            	<ul>
                                                                      	<li class="olb_font_font fl over2">仓鼠笼子送礼包47基础笼亚克力金丝熊小别墅小仓鼠大双层齐全窝包邮</li>
								<li class="olb_font_money fr">￥9.9</li>
                                                                                <li class="olb_font_num fr">x1</li>
                                                                      </ul>	
                                                                      <div class="clear"></div>
                                                            </div>	
                                                            <div class="ordlist_body_money fl">
                                                            	<div class="olb_money_money fl">
                                                                      	实付：<label>￥9.9</label>
                                                                      </div>
                                                                      <div class="olb_money_block fr" style="background-color:#eeeeee;">赚佣0.03元</div>
                                                            </div>
                                                            <div class="clear"></div>
                                                  </div>
                                                  <div class="ordlist_footer">订单单号：2019-11-21 11:11</div>	
                                        </a>
                                        <a href="ordetail.html">
                                        	<div class="ordlist_header">
                                                  	<div class="ordlist_header_time fl">下单：2019-11-21 11:11</div>
                                                            <div class="ordlist_header_state fr">已付款</div>
                                                  	<div class="clear"></div>
                                                  </div>
                                                  <div class="ordlist_body">
                                                  	<div class="ordlist_body_img fl">
                                                            	<img src="common/img/img001.jpg"/>
                                                            </div>
                                                            <div class="ordlist_body_font fl">
                                                            	<ul>
                                                                      	<li class="olb_font_font fl over2">仓鼠笼子送礼包47基础笼亚克力金丝熊小别墅小仓鼠大双层齐全窝包邮</li>
								<li class="olb_font_money fr">￥9.9</li>
                                                                                <li class="olb_font_num fr">x1</li>
                                                                      </ul>	
                                                                      <div class="clear"></div>
                                                            </div>	
                                                            <div class="ordlist_body_money fl">
                                                            	<div class="olb_money_money fl">
                                                                      	实付：<label>￥9.9</label>
                                                                      </div>
                                                                      <div class="olb_money_block fr">赚佣0.03元</div>
                                                            </div>
                                                            <div class="clear"></div>
                                                  </div>
                                                  <div class="ordlist_footer">订单单号：2019-11-21 11:11</div>	
                                        </a>	
                              </div>
                              <div class="ordlist fukuan" style="display:none;">
                                        <a href="ordetail.html">
                                        	<div class="ordlist_header">
                                                  	<div class="ordlist_header_time fl">下单：2019-11-21 11:11</div>
                                                            <div class="ordlist_header_state fr">已付款</div>
                                                  	<div class="clear"></div>
                                                  </div>
                                                  <div class="ordlist_body">
                                                  	<div class="ordlist_body_img fl">
                                                            	<img src="common/img/img001.jpg"/>
                                                            </div>
                                                            <div class="ordlist_body_font fl">
                                                            	<ul>
                                                                      	<li class="olb_font_font fl over2">仓鼠笼子送礼包47基础笼亚克力金丝熊小别墅小仓鼠大双层齐全窝包邮</li>
								<li class="olb_font_money fr">￥9.9</li>
                                                                                <li class="olb_font_num fr">x1</li>
                                                                      </ul>	
                                                                      <div class="clear"></div>
                                                            </div>	
                                                            <div class="ordlist_body_money fl">
                                                            	<div class="olb_money_money fl">
                                                                      	实付：<label>￥9.9</label>
                                                                      </div>
                                                                      <div class="olb_money_block fr">赚佣0.03元</div>
                                                            </div>
                                                            <div class="clear"></div>
                                                  </div>
                                                  <div class="ordlist_footer">订单单号：2019-11-21 11:11</div>	
                                        </a>	
                              </div>
                              <div class="ordlist jiesuan" style="display:none;">
                              	<a href="ordetail.html">
                                        	<div class="ordlist_header">
                                                  	<div class="ordlist_header_time fl">下单：2019-11-21 11:11</div>
                                                            <div class="ordlist_header_state fr">已结算</div>
                                                  	<div class="clear"></div>
                                                  </div>
                                                  <div class="ordlist_body">
                                                  	<div class="ordlist_body_img fl">
                                                            	<img src="common/img/img001.jpg"/>
                                                            </div>
                                                            <div class="ordlist_body_font fl">
                                                            	<ul>
                                                                      	<li class="olb_font_font fl over2">仓鼠笼子送礼包47基础笼亚克力金丝熊小别墅小仓鼠大双层齐全窝包邮</li>
								<li class="olb_font_money fr">￥9.9</li>
                                                                                <li class="olb_font_num fr">x1</li>
                                                                      </ul>	
                                                                      <div class="clear"></div>
                                                            </div>	
                                                            <div class="ordlist_body_money fl">
                                                            	<div class="olb_money_money fl">
                                                                      	实付：<label>￥9.9</label>
                                                                      </div>
                                                                      <div class="olb_money_block fr">赚佣0.03元</div>
                                                            </div>
                                                            <div class="clear"></div>
                                                  </div>
                                                  <div class="ordlist_footer">订单单号：2019-11-21 11:11</div>	
                                        </a>
                              </div>
                              <div class="ordlist shixiao" style="display:none;">
                                        <a href="ordetail.html">
                                        	<div class="ordlist_header">
                                                  	<div class="ordlist_header_time fl">下单：2019-11-21 11:11</div>
                                                            <div class="ordlist_header_state fr" style="color:#999">已失效</div>
                                                  	<div class="clear"></div>
                                                  </div>
                                                  <div class="ordlist_body">
                                                  	<div class="ordlist_body_img fl">
                                                            	<img src="common/img/img001.jpg"/>
                                                            </div>
                                                            <div class="ordlist_body_font fl">
                                                            	<ul>
                                                                      	<li class="olb_font_font fl over2">仓鼠笼子送礼包47基础笼亚克力金丝熊小别墅小仓鼠大双层齐全窝包邮</li>
								<li class="olb_font_money fr">￥9.9</li>
                                                                                <li class="olb_font_num fr">x1</li>
                                                                      </ul>	
                                                                      <div class="clear"></div>
                                                            </div>	
                                                            <div class="ordlist_body_money fl">
                                                            	<div class="olb_money_money fl">
                                                                      	实付：<label>￥9.9</label>
                                                                      </div>
                                                                      <div class="olb_money_block fr" style="background-color:#eeeeee;">赚佣0.03元</div>
                                                            </div>
                                                            <div class="clear"></div>
                                                  </div>
                                                  <div class="ordlist_footer">订单单号：2019-11-21 11:11</div>	
                                        </a>
                              </div>
                              <script>
				function imgs(){
					var image_width=$(".ordlist_body_img").width();
					var image_height=$(".ordlist_body_img").height();
					var image_bi=image_width/image_height;
					$(".ordlist_body_img img").each(function (){
						var images_width=$(this).width();
						var images_height=$(this).height();
						var images_bi=images_width/images_height;
						if(image_bi<images_bi){
							$(this).css("height",image_height);
							var imgwidth=image_height * images_bi;
							var widths= 0 - (imgwidth - image_width) / 2;
							$(this).css("margin-left",widths);
						}else{
							$(this).css("width","100%");	
							var imgheight=image_width / images_bi;	
							var heights=0 - (imgheight - image_height) / 2;
							$(this).css("margin-top",heights);
						}
					})	
				}			
			</script>
                    
                    </div>
          </div>

</body>
</html>
